<template>
    <view class="content">
        <u-form labelWidth="90px" labelPosition="left" :model="userInfo" :rules="rules" ref="authenticationForm">
            <u-form-item label="真实姓名" prop="name" borderBottom="true" ref="item1">
                <u-input v-model="userInfo.name" border="none" placeholder="请输入姓名"></u-input>
            </u-form-item>
            <u-form-item label="证件类型" prop="card_type" @click="showAction = true;" borderBottom="true" ref="item2">
                <u-input v-model="userInfo.card_type" border="none" :readonly="true" placeholder="请选择证件类型"></u-input>
            </u-form-item>
            <u-form-item label="证件号码" prop="card_id" borderBottom="true" ref="item1">
                <u-input v-model="userInfo.card_id" border="none" placeholder="请输入身份证件号码"></u-input>
            </u-form-item>
            <u-form-item label="认证状态" prop="is_certified" borderBottom="true" ref="item1">
                <u-input v-model="userInfo.is_certified" border="none" :readonly="true"></u-input>
            </u-form-item>
        </u-form>
        <u-button type="primary" text="立即认证" @click="toCertified"></u-button>
        <u-action-sheet :show="showAction" :actions="cardTypeList" title="请选择证件类型" @close="showAction = false"
            @select="confirmCardType">
        </u-action-sheet>
        <u-toast ref="toastRef"></u-toast>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { userCertified } from '@/api/mine/mine'
import type { certified } from '@/model/api/user'
import CONTENT from '@/utils/constants'
const userInfo: certified = {
    name: '',
    card_id: '',
    card_type: '',
    is_certified: '未认证'
}

const toastRef: any = ref(null)

const authenticationForm: any = ref(null)

const cardTypeList = ref([
    {
        name: '居民身份证(中国大陆)'
    }
])

const showAction = ref(false)

const rules: any = ref({
    name: [{
        type: 'string',
        required: true,
        pattern: CONTENT.PATTERN.NAME,
        // 正则检验前先将值转为字符串
        transform(value: any) {
            return String(value);
        },
        message: '姓名格式不合法'
    }],
    card_type: [{
        type: 'string',
        required: true,
        message: '证件类型不可为空',
        trigger: ['blur', 'change']
    }],
    card_id: [{
        type: 'string',
        required: true,
        message: '输入合法的身份证件号',
        // 正则检验前先将值转为字符串
        transform(value: any) {
            return String(value);
        },
        pattern: CONTENT.PATTERN.IDCARD_INLAND,
        trigger: ['blur', 'change']
    }]
}

)

const confirmCardType = (val: any) => {
    userInfo.card_type = val.name
}

const toCertified = () => {
    authenticationForm.value.validate().then(() => {
        userCertified(userInfo).then((res: any) => {
            if (res.code == 200) {
                toastRef.value.show({
                    type: 'success',
                    message: "实名认证成功",
                    duration: 3000,
                    position: 'top',
                    complete: function () {
                        uni.redirectTo({
                            url: '/pages/setting/index'
                        });
                    }
                })
            }
        })
    })
}

</script>

<style lang="scss" scoped>
.content {
    border-top: 2rpx solid #E4E4E4;
    padding: 0rpx 20rpx 20rpx 20rpx;
}
</style>